<template>
  <div
    class="echart-property-popup"
    :comp="component"
  >
    <div class="rooter">
      <span class="title">{{ title }}</span>
      <el-button
        icon="Tools"
        :link="true"
        type="primary"
        @click="openDialog()"
      >
        {{ $demoi18n('panel.btn.setting') }}
      </el-button>
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      :width="width"
      append-to-body
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :class="`${customClass} ${visualThemeClassName} ${xvueNameSpace}`"
    >
      <div
        class="cont"
        :comp="component"
      >
        <PanelLabelOverflowTooltip ref="panelLabelOverflowTooltip" />
        <el-form
          v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
          :model="form_"
        >
          <component
            :is="comps[component]"
            v-if="dialogVisible"
            ref="comp"
            :form="form_"
            :cur-info="curInfo"
            :index="index"
          />
        </el-form>
      </div>
      <template #footer>
        <span>
          <el-button
            size="default"
            @click="cancelForm()"
          >{{ $demoi18n('btn.cancel') }}</el-button>
          <el-button
            type="primary"
            size="default"
            @click="submitForm()"
          >
            {{ $demoi18n('btn.confirm') }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import { merge } from 'lodash';
import { defineAsyncComponent } from 'vue';
const splitLine = defineAsyncComponent(() => import('@/components/common/echart/splitLine/splitLine.vue'));
const markLineArea = defineAsyncComponent(() => import('@/components/common/echart/series/markLineArea.vue'));
const xAxisName = defineAsyncComponent(() => import('@/components/common/echart/xAxis/xAxis-name.vue'));
const xAxisAxisLabel = defineAsyncComponent(() => import('@/components/common/echart/xAxis/xAxis-axisLabel.vue'));
const xAxisAxisTick = defineAsyncComponent(() => import('@/components/common/echart/xAxis/xAxis-axisTick.vue'));
const xAxisAxisLine = defineAsyncComponent(() => import('@/components/common/echart/xAxis/xAxis-axisLine.vue'));
const yAxisName = defineAsyncComponent(() => import('@/components/common/echart/yAxis/yAxis-name.vue'));
const yAxisAxisLabel = defineAsyncComponent(() => import('@/components/common/echart/yAxis/yAxis-axisLabel.vue'));
const yAxisAxisTick = defineAsyncComponent(() => import('@/components/common/echart/yAxis/yAxis-axisTick.vue'));
const yAxisAxisLine = defineAsyncComponent(() => import('@/components/common/echart/yAxis/yAxis-axisLine.vue'));
const dataZoomInside = defineAsyncComponent(() => import('@/components/common/echart/dataZoom/dataZoom-inside.vue'));
const labelLinePie = defineAsyncComponent(() => import('@/components/common/echart/series/labelLine/labelLine-pie.vue'));

export default {
  components: {
    PanelLabelOverflowTooltip,
    splitLine,
    markLineArea,
    xAxisName,
    xAxisAxisLabel,
    xAxisAxisTick,
    xAxisAxisLine,
    yAxisName,
    yAxisAxisLabel,
    yAxisAxisTick,
    yAxisAxisLine,
    dataZoomInside,
    labelLinePie,
  },
  mixins: [EchartCommonMixin],
  props: {
    title: String,
    form: Object,
    component: String,
    width: {
      type: String,
      default: '380px',
    },
  },
  data() {
    return {
      xvueNameSpace: process.env.xvueNameSpace, // 给挂载在body下的元素加上主类名
      dialogVisible: false,
      form_: {},
      comps: {},
      curInfo: {}, // 子组件一些操作状态记录到这里
    };
  },
  computed: {
    customClass() {
      const arr = [
        'echart-property-popup_dialog',
        `echart-property-popup_dialog_${window._adoPremise.uc.theme || 'light'}`,
      ];
      return arr.join(' ');
    },
  },
  watch: {},
  created() {
    this.initComponent();
    this.syncForm(this.form, this.form_);
  },
  methods: {
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
    syncForm(srcForm, tarForm) {
      if (srcForm === this.form) {
        this.form_ = JSON.parse(JSON.stringify(this.form));
      } else {
        merge(this.form, this.form_);

        try {
          this.form.echart.series.markLine.data = this.form_.echart.series.markLine.data;
        } catch (e) {}
        try {
          this.form.echart.series.markArea.data = this.form_.echart.series.markArea.data;
        } catch (e) {}
      }
    },
    openDialog() {
      this.syncForm(this.form, this.form_);
      this.dialogVisible = true;
    },
    submitForm() {
      this.syncForm(this.form_, this.form);
      this.dialogVisible = false;
    },
    cancelForm() {
      this.dialogVisible = false;
    },
    initComponent() {
      const componentsMap = {
        'splitLine/splitLine': splitLine,
        'series/markLineArea': markLineArea,
        'xAxis/xAxis-name': xAxisName,
        'xAxis/xAxis-axisLabel': xAxisAxisLabel,
        'xAxis/xAxis-axisTick': xAxisAxisTick,
        'xAxis/xAxis-axisLine': xAxisAxisLine,
        'yAxis/yAxis-name': yAxisName,
        'yAxis/yAxis-axisLabel': yAxisAxisLabel,
        'yAxis/yAxis-axisTick': yAxisAxisTick,
        'yAxis/yAxis-axisLine': yAxisAxisLine,
        'dataZoom/dataZoom-inside': dataZoomInside,
        'series/labelLine/labelLine-pie': labelLinePie,
      };
      this.comps[this.component] = componentsMap[this.component];
    },
  },
};
</script>
<style lang="less" scoped>
.echart-property-popup {
  .rooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    .title {
      margin-left: 6px;
      color: #606266;
      font-size: 14px;
    }
  }
}
</style>
<style lang="less">
@import '../../../common/variables.less';
.echart-property-popup_dialog {
  .el-form-item__label {
    width: 130px !important;
  }
}
.echart-property-popup_dialog_dark {
}

.visualComponents_theme_dark {
  .echart-property-popup {
    .rooter {
      .title {
        color: @font_color_dark;
      }
    }
  }
}
</style>
